<template>
	<view class="chooseColMajor" v-if="showMajorNew">
		<view class="layer">
			<view class="layerMain">
				<view class="flex alignCenter justConBetween font14 oper">
					<view class="" @click="cancel">取消</view>
					<view class="colorMain" @click="clickSure">确定</view>
				</view>
				<view class="flex justConBetween font14">
					<scroll-view scroll-y="true" class="scrollPro">
						<view :class="(subject && subject.id==item.id)?'proItem activePro':'proItem'" v-for="(item,index) in subjectArr" :key="index" @click="chooseSubject(item)">({{item.subjectCode}}){{item.title}}</view>
					</scroll-view>
					<view class="schoolBox font14">
						<!-- <view class="search"><input class="font14" type="text" v-model="searchVal" placeholder="请输入大学名" @input="inputSearch"></view> -->
						<text :class="(subjectOne && subjectOne.id==item.id)?'schoolItem active font12 hiddenOneline':'schoolItem font12 hiddenOneline'" v-for="(item,index) in subjectOneArr" :key="index" @click="chooseSubjectOne(item)">({{item.subjectCode}}){{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getSubject,getMajorBySubject } from "@/api/index.js"
	export default {
		name:"uni-choosecolmajor",
		props:{
			showMajor:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				subjectArr:[],
				subject:'',
				subjectOneArr:[],
				subjectOne:'',
				majorArr:[],
				major:'',
				showMajorNew:this.showMajor
			};
		},
		created() {
			this.getSubjectList(0)
		},
		methods:{
			// 获取学科门类
			getSubjectList(type){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let param={
					pageNum:1,
					pageSize:99999,
					type:type,
					year:new Date().getFullYear(),
				}
				if(type>0){
					param.subjectCode=this.subject.subjectCode
				}
				getSubject(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						this.showMajorNew=true
						console.log('学科门类',res)
						if(type===0){
							this.subjectArr=res.data.rows
							this.subject=res.data.rows[0]
							this.getSubjectList(1)
							return
						}else if(type===1){
							this.subjectOneArr=res.data.rows
						}
					}
				}).catch((err)=>{uni.hideLoading()})
			},
			// 选则学科门类
			chooseSubject(item){
				this.subject=item
				this.subjectOne=''
				this.getSubjectList(1)
			},
			// 选择一级学科
			chooseSubjectOne(item){
				this.subjectOne=item
				this.major=''
				this.getMajor()
			},
			// 选择专业
			chooseMajor(item){
				this.major=item
			},
			// 获取专业列表
			getMajor(){
				let param={
					year:new Date().getFullYear(),
					subjectOneCode:this.subjectOne.subjectCode
				}
				getMajorBySubject(param).then((res)=>{
					if(res.code==100000){
						console.log('专业',res)
						this.majorArr=res.data
					}
				})
			},
			cancel(){
				this.showMajorNew=false
				this.$emit('cancelMajor')
			},
			clickSure(){
				if(!this.subject){
					uni.showToast({
						icon:'none',
						title:'请选择学科门类！'
					})
					return
				}
				if(!this.subjectOne){
					uni.showToast({
						icon:'none',
						title:'请选择一级学科！'
					})
					return
				}
				// if(!this.major){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'请选择专业！'
				// 	})
				// 	return
				// }
				this.$emit('majorSuccess',{subject:this.subject,subjectOne:this.subjectOne,major:this.major})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
.chooseColMajor{
	position: fixed;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	top:0;
	left:0;
	z-index: 100;
	.layer{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
	}
	.layerMain{
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		border-radius: 32rpx 32rpx 0 0;
		padding: 30rpx 0 0;
		box-sizing: border-box;
		.oper{
			// margin:0 0 60rpx;
			padding: 0 40rpx 30rpx;
			border-bottom: 1px solid #F8F9FC;
		}
		.proItem{
			background: #f2f2f2;
			text-align: center;
			padding: 30rpx 10rpx;
			box-sizing: border-box;
		}
		.activePro{
			background: #fff;
		}
		.scrollPro{
			height:60vh;
			overflow-y: scroll;
		}
		.schoolBox{
			height:60vh;
			overflow-y: scroll;
			flex:0 0 70%;
			flex-shrink: 0;
			padding: 30rpx;
			box-sizing: border-box;
			.schoolItem{
				display: inline-block;
				margin: 0 10rpx 20rpx 0;
				height:60rpx;
				line-height: 60rpx;
				border-radius: 60rpx;
				padding: 0 30rpx;
				border: 1px solid $colorMain;
				i{
					color: $colorMain;
				}
			}
			.nochoose{
				background: #F8F9FC;
				border:1px solid #F8F9FC;
			}
			.active{
				background:$colorMain;
				color:$color333;
			}
			.search{
				margin: 0 0 20rpx 0;
				input{
					border:1px solid #f2f2f2;
					border-radius: 40rpx;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 0 0 20rpx;
				}
			}
		}
	}
}
</style>